<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>

    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/login.css">
    <script src="js/jquery.min.js"></script>
</head>
<body>
<div class="nav">
    五子棋对战
</div>
<div class="login-container">
    <!-- 登录界面的对话框 -->
    <div class="login-dialog">
        <!-- 提示信息 -->
        <h3>登录</h3>
        <!-- 这个表示一行 -->
        <div class="row">
            <span>用户名</span>
            <input type="text" id="username">
        </div>
        <!-- 这是另一行 -->
        <div class="row">
            <span>密码</span>
            <input type="password" id="password">
        </div>
        <!-- 提交按钮 -->
        <div class="row">
            <button id="submit" onclick="login()">提交</button>
        </div>
    </div>

</div>

<script>
    function login() {
        // 用 jQuery 得到输入框里的值
        var username = jQuery("#username").val();
        var password = jQuery("#password").val();
        // 判断输入框里的值是否有效，无效返回
        if (username == "" || password == "") {
            alert("用户名或密码不能为空！");
            return;
        }
        jQuery.ajax({
            // 用 ajax 向后端传输数据来进行注册
            url: '/user/login',
            type: 'post',
            data: {"username": username, "password": password},
            success: function (result) {
                if(result != null && result.status == 200 && result.data) {
                    // 登录成功，跳转到大厅页面
                    alert("登录成功");
                    location.href = "/game_hall.html";
                } else {
                    alert("登录失败，请重试");
                }
            }
        });
    }
</script>
</body>
</html>